<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>确认订单</title>
		<link rel="icon" href="img/milogo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="CSS/reset.css"/>
		<link rel="stylesheet" type="text/css" href="CSS/address.css"/>
		<link rel="stylesheet" type="text/css" href="CSS/currency.css"/>
		<link rel="stylesheet" type="text/css" href="CSS/confirm.css"/>
	</head>
	<body>
		<!-- 我的购物车顶部导航栏 -->
		<div class="header-box">
			<div class="container clearfix">
				<div class="fl header-left">
					<div class="iconfont icon-icon-xiaomiguishu"></div>
					<div>确认订单</div>
				</div>
				<div class="fr header-right">
					<ul>
						<li class="user-title">
							<p>
								小二<span class="iconfont icon-xia"></span>
							</p>
							<div class="user-list">
								<ul>
									<li>个人中心</li>
									<li>评价晒单</li>
									<li>我的喜欢</li>
									<li>小米账户</li>
									<li>退出登录</li>
								</ul>
							</div>
						</li>
						<li><a href="order.html" target="_blank">我的订单</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		
		<!-- 中间部分 -->
		
		<div>
			<div class="container ">
				<div class="orderInfor">
					<div class="orderInfor-title">收货地址</div>
					<div class="add-box">
							<div class="address-list" th:dataid="${address.id}" th:each="address:${addressList}">
								<div class="addressBox clearfix" >
									<div class="address-label" th:text="${address.tag}">标签</div>
									<div class="address-name" th:text="${address.memberName}">姓名</div>
									<div class="address-number" th:text="${address.memberTel}">手机号</div>
									<div  class="address-address" th:text="${address.provience+'-'+address.city+'-'+address.area}" >地址</div>
									<div class="address-detailed" th:text="${address.address}">详细地址</div>
									<div class="address-change">
										<span class="address-changeed">修改</span>
										<span class="address-dele">删除</span>
									</div>
								</div>
							</div>
					
					
					</div>
					
					<div class="addAddress-box">
						<div class="addAddress">
							<p class="iconfont icon-jiahao-"></p>
							<span>添加新地址</span>
						</div>
					</div>
					
					
					<div class="orderInfor-title">商品及优惠卷</div>
					<div class="order-infor" th:each="cart:${carts}">
						<div><img width="50px" height="50px" th:src="${cart.imgPath}" ></div>
						<div class="order-infor-name" th:text="${cart.productName}"></div>
						<div class="order-infor-num" th:text="${cart.price +'元 *'+ cart.amount}"></div>
						<div class="order-infor-status"></div>
						<div class="order-infor-money" th:text="${cart.amount*cart.price+'元'}"></div>
					</div>
					<div class="mode">
						<div class="orderInfor-title">配送方式</div>
						<div>包邮</div>
					</div>
					<div class="invoice">
						<div class="orderInfor-title">发票</div>
						<div>电子普通发票</div>
						<div>个人</div>
						<div>商品明细</div>
						<div class="invoice">修改></div>
					</div>
					
					<div class="settlement-box clearfix">		<!-- 发票下，结算详情 -->
						<div class="settlement-left fl">
							<div class="settlement-left-top"><span class="iconfont icon-jiahao-"></span>使用优惠卷</div>
							<div class="settlement-left-bottom"><span class="iconfont icon-jiahao-"></span>使用小米礼品卡</div>
						</div>
						<div class="settlement-right fr">
							<table>
								<tr>
									<td>商品件数：</td>
									<td>1件</td>
								</tr>
								<tr>
									<td>商品总价：</td>
									<td>1699元</td>
								</tr>
								<tr>
									<td>活动优惠：</td>
									<td>-0元</td>
								</tr>
								<tr>
									<td>优惠卷抵扣：</td>
									<td>-0元</td>
								</tr>
								<tr>
									<td>运费：</td>
									<td>0元</td>
								</tr>
								<tr>
									<td>应付总额：</td>
									<td class="moneyTotla"><b>1699</b>元</td>
								</tr>
							</table>
						</div>
						
					</div>
					<form action="/order/save/" method="post" id="orderForm">
						<input id="addId" type="text" name="addId"/>
						<input type="text" name="cartIds" th:value="${param.cartIds}"/>
					<div class="address-bottom-box clearfix">
						<div class="address-left fl">
							<p>
								<span>张三</span>
								<span>164****7473</span>
							</p>
							<p>
								<span>山西 阳泉市 平定县 发的发个体户</span>
								<span class="address-changeed">修改</span>
							</p>
						</div>
						<div class="address-right fr">
							<button class="return" type="button">返回购物车</button>
							<button id="orderBtn" class="buy" type="button"><a href="javascript:;">立即下单</a></button>
						</div>
					</div>
					</form>
				</div>
			</div>
		</div>
		
		
		
		
		
		
		
		
		
		
		
		<!-- 添加地址弹出框 -->
		<div class="alert-box">
			<div class="alert">
				<p class="alert-title clearfix">
					<span class="title">添加收获地址</span>
					<span class="close">x</span>
				</p>
		<form>
				<div class="alert-box-content">
					<div class="alert-bottom-box name-box">
						<label for="input-name" class="plaLabel pla-name">姓名</label>
						<input id="input-name" type="text" class="input input-name" />
					</div>
					<div class="alert-bottom-box number-box">
						<label for="input-number" class="plaLabel pla-number">手机号</label>
						<input id="input-number" type="text" class="input input-number" />
					</div>
		
					<div class="alert-bottom-box choice-box">
						<label for="input-choice" class="plaLabel pla-choice">选择省/市/区/街道 <span class="iconfont icon-you"></span></label>
						<input id="input-choice" type="text" class="input input-choice" />
		
						<div class="choice-alert">
							<div class="clearfix">
								<span class="closeAddress">x</span>
								<div class="lookup-box">
									<span class="iconfont icon-chazhaosousuo"></span>
									<input id="input-lookup" type="text" class="input input-lookup"	placeholder="输入街道、乡镇、小区或商圈名称" />
								</div>
								<div class="address-des">例如：北京 华润五彩城</div>
								<hr>
								<div class="choice-hand">手动选择地址 ></div>
							</div>
		
							<div>
								<!-- 手动选择地址 -->
		
							</div>
						</div>
					</div>
		
					<div class="alert-bottom-box address-box">
						<label for="input-address" class="plaLabel pla-address">详细地址</label>
						<input id="input-address" type="text" class="input input-address" />
					</div>
		
					<div class="alert-bottom-box addressLabel-box">
						<label for="input-addressLabel" class="plaLabel pla-addressLabel">地址标签</label>
						<input id="input-addressLabel" type="text" class="input input-addressLabel" />
					</div>
				</div>
				</form>
				
				
				<div class="determine-box">
					<button id="determine" type="button" class="determine">确定</button>
					<button id="cancel" type="button" class="cancel">取消</button>
				</div>
			</div>
		</div>
		
		
		
		
		
		<!-- 发票弹出框 -->
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!-- 底部导航栏 -->
		<div class="footer-banner">
			<div class="container">
				<div class="footer-service">	<!-- 维修服务 -->
					<ul>
						<li>
							<i class="iconfont icon-buoumaotubiao46"></i>
							预约维修服务
						</li>
						<li>
							<i class="iconfont icon-7tiantuihuanhuo"></i>
							7天无理由退货
						</li>
						<li>
							<i class="iconfont icon-15tianwuliyoutuihuo"></i>
							15天免费换货
						</li>
						<li>
							<i class="iconfont icon-liwu"></i>
							满69包邮
						</li>
						<li>
							<i class="iconfont icon-address"></i>
							520余家售后网点
						</li>
					</ul>
				</div>
				<div class="footer-help">
					<div class="footer-help-list clearfix">
						<dl>
							<dt>帮助中心</dt>
							<dd>账户管理</dd>
							<dd>购物指南</dd>
							<dd>订单操作</dd>
						</dl>
						<dl>
							<dt>服务支持</dt>
							<dd>售后政策</dd>
							<dd>自助服务</dd>
							<dd>相关下载</dd>
						</dl>
						<dl>
							<dt>线下门店</dt>
							<dd>小米之家</dd>
							<dd>服务网点</dd>
							<dd>授权体验店</dd>
						</dl>
						<dl>
							<dt>关于小米</dt>
							<dd>了解小米</dd>
							<dd>加入小米</dd>
							<dd>投资者关系</dd>
							<dd>企业社会责任</dd>
							<dd>廉洁举报</dd>
						</dl>
						<dl>
							<dt>关注我们</dt>
							<dd>新浪微博</dd>
							<dd>官方微信</dd>
							<dd>联系我们</dd>
							<dd>公益基金会</dd>
						</dl>
						<dl>
							<dt>特色服务</dt>
							<dd>F 码通道</dd>
							<dd>礼物码</dd>
							<dd>防伪查询</dd>
						</dl>
					</div>
					<div class="footer-help-phone">
						<p>400-100-5678</p>
						<p>8:00-18:00（仅收市话费）</p>
						<p class="customer">
							<i class="iconfont icon-xiaoxi"></i>
							人工客服
						</p>
						<p class="follow">
							关注小米：
							<i class="iconfont icon-weibo1"></i>
							<i class="iconfont icon-weixin1"></i>
						</p>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 底部信息栏 -->
		<div class="footer-bottom">
			<div class="container">
				<div class="iconfont icon-icon-xiaomiguishu"></div>
				<div class="bottom-box">
					<div class="bottom-one">	<!-- 底部信息栏第一行 -->
						<ul>
							<li>小米商城</li>
							<li>MIUI</li>
							<li>米家</li>
							<li>米聊</li>
							<li>多看</li>
							<li>游戏</li>
							<li>政企服务</li>
							<li>小米天猫店</li>
							<li>小米集团隐私政策</li>
							<li>小米公司儿童信息保护规则</li>
							<li>小米商城隐私政策</li>
							<li>小米商城用户协议</li>
							<li>问题反馈</li>
							<li>Select Location</li>
						</ul>
					</div>
					<div class="bottom-two">	<!-- 第二行 -->
						<ul>
							<li>北京互联网法院法律服务工作站</li>
							<li>中国消费者协会</li>
							<li>北京市消费者协会</li>
						</ul>
					</div>
					<div class="bottom-three">
						<ul>
							<li>
								<a>© mi.com </a>
								<a>京ICP证110507号 </a>
								<a>京ICP备10046444号 </a>
								<a>京公网安备11010802020134号 </a>
								<a>京网文[2020]0276-042号</a>
							</li>
							<li>
								<a>（京）网械平台备字（2018）第00005号</a>
								<a>互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
								<a>营业执照</a>
								<a>医疗器械质量公告</a>
							</li>
							<li>
								<a>增值电信业务许可证</a>
								<a>网络食品经营备案 京食药网食备202010048</a>
								<a>食品经营许可证</a>
							</li>
							<li>
								<a>违法和不良信息举报电话：171-5104-4404 </a>
								<a>知识产权侵权投诉 </a>
								<a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
							</li>
						</ul>
					</div>
					<div class="bottom-four">
						<a><img src="img/index/truste.png" ></a>
						<a><img src="img/index/vlogo2.png" ></a>
						<a><img src="img/index/icon3.png" ></a>
						<a><img src="img/index/ba10428a4f9495ac310fd0b5e0cf8370.png" ></a>
						<a><img src="img/index/9a9e3f6928faa53374adc14a5884f896.png" ></a>
					</div>
				</div>
				<div class="bottom-text">让全球每个人都能享受科技带来的美好生活</div>
			</div>
		</div>
		
		
		
		<script type="text/javascript" src="JS/jquery.js"></script>
		<!-- <script type="text/javascript" src="JS/currency.js"></script> -->
		<script type="text/javascript" src="JS/address.js"></script>
		<script type="text/javascript" src="JS/confirm.js"></script>
	<script>
		//找到地址div，绑定点击事件
		$(".address-list").on("click",function() {
           var _this = $(this);
           _this.siblings().removeClass("act");
           _this.addClass("act");
           $("#addId").val(_this.attr("dataid"))
		});

		/*$("#orderBtn").on("click", function() {
           var addId=$("#addId").val();
           if(!add){
           	alert("请选择一个地址")
			   return false;
		   }
           else {
			   $("#orderForm").submit();
		   }
           });*/
		$("#orderBtn").on("click", function() {
			var addId=$("#addId").val();//当前选择的地址ID
			if(!addId){
				alert("请先选择一个地址");
				return false;
			}
			$("#orderForm").submit();

		});

	</script>
	</body>
</html>
